<template>
  <div v-loading="loadingCharts" class="norm">
    <div class="header">
      <div class="icon" />
      <div class="title">关键监控指标</div>
    </div>
    <div ref="chart" style="height: 240px;" class="body">
      <v-chart v-if="chartStatistics.show" :id="'homeId'" ref="linechart" v-loading="loadingCharts" :data="chartStatistics.date" :transaction-data-arr="chartStatistics.dataArr" :size="chartStatistics.chartSize" />
    </div>
  </div>
</template>

<script>
import charts from './components/chart'
import { getChartData } from '@/api/overview'
import { changWeek } from '@/utils/util'
export default {
  name: 'Norm',
  components: { 'v-chart': charts },
  props: {
    canShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chartStatistics: {
        show: false,
        date: [],
        dataArr: [],
        chartSize: {
          width: 0,
          height: 0
        }
      },
      loadingCharts: false
    }
  },
  watch: {
    canShow(n, o) {
      if (n) {
        this.getChart()
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.chartStatistics.chartSize.width = this.$refs.chart.offsetWidth
      this.chartStatistics.chartSize.height = 240
      if (this.canShow) {
        this.getChart()
      }
    })
  },
  methods: {
    getChart: function() {
      this.loadingCharts = true
      this.chartStatistics.show = false
      this.chartStatistics.date = []
      this.chartStatistics.dataArr = []
      const groupId = 1
      getChartData(groupId)
        .then(res => {
          this.loadingCharts = false
          if (res.code === 0) {
            const resData = changWeek(res.data)
            for (let i = 0; i < resData.length; i++) {
              this.chartStatistics.date.push(resData[i].day)
              this.chartStatistics.dataArr.push(
                resData[i].transCount
              )
            }
            this.$set(this.chartStatistics, 'show', true)
          } else {
            this.$messageOnce.error('获取图表输出出错')
          }
        })
        .catch(err => {
          this.$messageOnce({
            message: err.data || '',
            type: 'error',
            duration: 2000
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.norm {
	width: 790px;
	height: 324px;
  margin: 15px;
  padding: 0 20px;
	background: #FFFFFF;
	box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.04);
	border-radius: 10px;
  display: inline-block;
	.header {
		height: 64px;
    display: flex;
    align-items: center;
    .title {
      font-size: 18px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #2C2C2C;
    }
    .icon {
      width: 24px;
      height: 24px;
      background: url('../../assets/overview/norm.png');
      background-size: 100%;
      margin-right: 20px;
    }
	}
  .body {
    height: 240px;
  }
}
</style>
